<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 角色绑定资源
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <span class="mr10" style="margin-right:10px">请选择要操作的系统角色</span>
                <el-select v-model="query.sid" placeholder="平台内角色" value-key = "" class="handle-select mr10" @change="func_handleSearch">
                    <el-option label="请选择" value=""></el-option>
                    <el-option v-for="item in role_Opts" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="func_handleSearch">搜索</el-button>
                <el-button type="warning" icon="el-icon-finished" @click="func_handleSaveEdit">保存</el-button>
            </div>
            <el-card class="box-card">
                <el-tree :data="role_resouse_table_data"
                    show-checkbox node-key="id" highlight-current accordion
                    :default-expanded-keys="expanded_keys"
                    :default-checked-keys="checked_keys"
                    :props="defaultProps" @check-change="handleCheckChange" >
                </el-tree>
            </el-card>
        </div>
    </div>
</template>

<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchRoleResouses, fetchRoleOptData, editRoleResouseConn, delRoleResouseConn } from "../../api/uc";

export default {
    name: "roleResouseTable",
    setup() {
        let SUCCMESS_DIALOG_MESSAGE = "操作成功";
        let FAILD_DIALOG_MESSAGE = "操作失败";
        const query = reactive({
            sid: ""
        });
        let role_Opts = ref([{
            key :'',
            label :'',
            value :'',
        }]);
        let expanded_keys = ref([]);
        let checked_keys = ref([]);
        const role_resouse_table_data = ref([{
            id: 0,
            label: '',
            children: [{}],
        }]);
        // 公共 数据表多选临时存储
        let multipleSelectData = reactive([]);
        let role_resouse_form = ref([]);

        // 获取表格数据
        const func_getData = () => {
            if(query.sid == "" || query.sid.length ==0){
                role_resouse_table_data.value = null;
                return;
            };
            expanded_keys.value = null;
            checked_keys.value = null;
            // role_resouse_table_data.value = null;
            fetchRoleResouses(query).then((res) => {
                expanded_keys.value = res.data.data.expandedKeys;
                checked_keys.value = res.data.data.checkedKeys;
                role_resouse_table_data.value = res.data.data.views;
            }).catch(_ => { isLoading.value = false;});
        };
        func_getData();
        const fun_init_role_opt = () => {
            fetchRoleOptData().then((res)=> {
                role_Opts.value = res.data.data;
            });
        };
        fun_init_role_opt();
        // 查询操作
        const func_handleSearch = () => {
            query.pageIndex = 1;
            func_getData();
        };
        const handleCheckChange = (data, checked, indeterminate) => {
            // console.log(data, checked, indeterminate);
            if((checked || indeterminate)){
                if(multipleSelectData.indexOf(data.id) == -1){
                    multipleSelectData.push(data.id);
                }
            }else{
                multipleSelectData.pop(data.id);
            }
        };
        const func_handleSaveEdit = () => {
            let _v = {rsid :query.sid ,resouseIds: multipleSelectData};
            editRoleResouseConn(_v).then((res) => {
                if(res.data.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    ElMessage.success(SUCCMESS_DIALOG_MESSAGE);
                }
            });
        };
        const defaultProps = ref({
          children: 'children',
          label: 'label',
          id: 'id',
        });
        return {
            query, role_Opts, defaultProps,
            role_resouse_table_data,
            role_resouse_form, expanded_keys, checked_keys,
            func_handleSearch, func_handleSaveEdit, handleCheckChange
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.handle-select {
    width: 120px;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
